<template>
  <span
  class="switch-tab"
  :class="{'checked':checked}"
  @click="handle"
  >{{text}}</span>
</template>

<script>
export default {
  name: 'switch-tab',
  props: {
    text: {
      type: String,
      required: true
    },
    checked: {
      type: Boolean,
      default: () => false
    },
    handle: {
      type: Function
    }
  }
}
</script>

<style lang="stylus">
.switch-tab {
  display: inline-block;
  padding: 0 0.75em;
  font-size: 14px;
  line-height: 26px;
  border-radius: 18px;
  background-color: $font-gray;
  color: #ffffff;

  &.checked {
    background-color: $main-color;
  }

  &:not(:last-child) {
    margin-right: 1em;
  }
}
</style>
